<template>
<div class="viprights_wrap" v-if="isShow">
	  <div class="vipright_cover" @click="closeMyself"></div>
    <div class="vipright_content">
        <div class="vr_c_title">
            <div class="vr_c_title_right" @click="closeMyself"></div>
        </div>
        <div class="vip_r_middle"></div>
        <div class="vip_r_title">尊敬的{{vip_type|check_vip}}客户，您的权益剩余天数为 <span style="color:#c26c4d">{{vip_days}}</span>天</div>
        <div class="vip_right_down">
            <div class="v_rd_left" @click="get_vipcode">获取授权码</div>
            <div class="v_rd_right" @click="go_inputvipcode">填写授权码</div>
        </div>
    </div>
</div>
</template>
<script>
export default{
	props:{
      isShow: {
        type: Boolean,
        default: false
      },
	},
	data(){
		return{
      vip_days:null,
      vip_type:null,
		}
	},
  filters:{
    check_vip(data){
      if(data == 0){
        return 'SVIP'
      }
      if(data == 1){
        return 'VIP'
      }
      if(data == 2){
        return ''
      }
    }
  },
  mounted(){
     this.vip_days = localStorage.days 
     this.vip_type = localStorage.vip
  },
	methods:{
      closeMyself(){  //关闭插件
      	 this.$emit('on-close',1) 
      },
      get_vipcode(){  //获取授权码
         this.$emit('on-close',2) 
      },
      go_inputvipcode(){  //填写授权码
         this.$emit('on-close',3)
      }
	}
}	
</script>
<style lang="scss" scoped>
.viprights_wrap{
      position:fixed;
      .vipright_cover{
        background: #000;
        opacity: 0.3 ;
        position: fixed;
        z-index: 35;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .vipright_content{
        position: fixed;
        width:480px;
        height: 344px;
        margin-left: 40%;
        margin-top: 16%;
        background:rgba(255,255,255,1);
        border-radius:10px;
        z-index: 40;
        .vr_c_title{
          height: 72px;
          border-bottom:1px solid #dce0e6;        
          text-align: center;
          line-height: 56px;
          font-size: 14px;
          position:relative;
          background-image: url('../assets/img/introduce_vip_head.png');
          background-repeat: no-repeat;
          background-size:100% 100%;
          background-position: 0px 0px;
          .vr_c_title_right{
            position:absolute;
            right:10px;
            top:28px;
            width: 20px;
            height: 20px;
            cursor: pointer;
            background-image: url('../assets/img/close_icon_fornav@2x.png');
            background-repeat: no-repeat;
            background-size:16px 16px;
            background-position: 0px 0px;
          }
        }
        .vip_r_middle{
          width: 330px;
          height: 132px;
          margin:0 auto;
          margin-top: 28px;
          background-image: url('../assets/img/introduce_podium_img.png');
          background-repeat: no-repeat;
          background-size:100% 100%;
          background-position: 0px 0px;
        }
        .vip_r_title{
          text-align: center;
          font-size: 13px;
          margin-top: 20px;
        }
        .vip_right_down{
          display: flex;
          justify-content: center;
          margin-top: 47px;
          .v_rd_left{
             width:60px;
             height:12px;
             font-size:12px;

             color:rgba(64,143,255,1);
             line-height:12px;
             cursor: pointer;
          }
          .v_rd_right{
              margin-left: 24px;
              width:60px;
              height:12px;
              font-size:12px;
              color:rgba(64,143,255,1);
              line-height:12px;
              cursor: pointer;
          }
        }
      }
   }
</style>


